

$(function () {
    //获取用户数据
    function myajax() {
        //封装渲染页面的ajax
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/list',
            headers: {
                Authorization:
                    localStorage.getItem('token')
            },
            success: function (add) {
                console.log(add);
                //调用模板
                let html = template('res', add)
                $('tbody').html(html)
            }
        })
    }
    myajax()
    //2、给新增绑定事件
    $('.mysub').on('click', function (e) {
        e.preventDefault()
        let myhoby = $('.myhoby').val().trim()
        let mydepict = $('.mydepict').val().trim()

        $.ajax({

            url: 'http://localhost:8080/api/v1/admin/category/add',
            type: 'post',
            headers: {  //请求头
                //获取用户数据要带着token过去
                Authorization: localStorage.getItem('token')
            },
            data: {
                name: myhoby,
                slug: mydepict
            },

            success: function (res) {
                console.log(res);
                myajax()
                $('.myhoby').val('')
                $('.mydepict').val('')
                $('#myModal').modal('hide')
            }
        })

    })



    // 3、给编辑绑定事件(事件委托)
    $('.category_table').on('click', '.btn-info', function () {
        //展开模态框
        $('#editModal').modal('show')
        // 获取id值
        let id = $(this).data('id')
        // 保存id值在保存按钮
        $('.mysub').attr('id', id)

        console.log(id);

    })
    // 4、给保存增加点击事件
    $('.mysub').on('click', function () {
        console.log(1);
        //拿到id值
        let id = $(this).attr('id')

        // console.log(myhoby, mydepict);

        // console.log(id);

        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/search',
            type: 'get',
            headers: {  //请求头
                //获取用户数据要带着token过去
                Authorization: localStorage.getItem('token')
            },
            data: {
                id: id

            },
            success: function (res) {

                if (res.code === 200) {
                    let myone = $('.myone').val().trim()
                    let mytow = $('.mytow').val().trim()
                    $.ajax({

                        url: 'http://localhost:8080/api/v1/admin/category/edit',
                        type: 'post',
                        headers: {  //请求头
                            //获取用户数据要带着token过去
                            Authorization: localStorage.getItem('token')
                        },
                        data: {
                            id: id,
                            name: myone,
                            slug: mytow
                        },
                        success: function (res) {
                            console.log(res)
                            myajax()
                            $('.myone').val('')
                            $('.mytow').val('')
                            $('#editModal').modal('hide')

                        }

                    })

                }
            }


        })
    })
    //获取id是在模板引擎中直接是value.id才能是动态的
    //给删除做点击事件
    $('.category_table').on('click', '.delete ', function () {
        //引入layui框架的谈出层
        layer.confirm('您是否删除', index => {
            $.ajax({
                url: 'http://localhost:8080/api/v1/admin/category/delete',
                type: 'post',
                headers: {  //请求头
                    //获取用户数据要带着token过去
                    Authorization: localStorage.getItem('token')
                },
                //id要注意this的指向，用箭头函数就可以完美解决这个问题
                data: { id: $(this).prev().data('id') },
                success: function (res) {
                    if (res.code === 200) {

                        myajax()
                        layer.close(index);


                    }
                }
            })
        });
    })

})